<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script src="index4.js"></script>
          
    <style>
        .circle {
            border: 10px solid black;
            border-radius: 50%;
            width: 200px;
            height: 200px;
            box-shadow:3px 3px 10px red;
        }

        .delta {
            border: 100px solid red;
            width: 0px;
            height: 0px;
            border-color: transparent transparent red transparent;
        }

    </style>  
</head>
<body>
    <!-- <div class="cicle">

    </div> -->
    
    
    <button onclick="createCircle()">click me </button>

    <button onclick="moveCircle()">move circle</button><br>

    
    <button>点击淡入圆</button>
    <div class="circle_01" style="width: 100px; height: 100px; display: block; background-color: blueviolet; border-radius: 50px; position: relative;" ></div>
    <div class="circle_02" style="width: 100px; height: 100px; display: none; background-color: red; border-radius: 50px; position: relative;" ></div>

 
     <!-- <button onclick="createDelta()">click delta</button>

    <button onclick="moveDelta()">move delta</button> -->

    <!-- <div class="delta"></div> -->

</body>
</html>